<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./test.css">
    <style>
        /* p {
            color: red;
        } */
        /* *{
            color: red;
        } */
        /* .blue {
            color: blue;
        }

        li:nth-child(7),
        li:nth-child(4),
        li:nth-child(8) {
            background-color: red;
        } */
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            /*四周*/
            /* padding: 10px; */
            /* 上下 左右 */
            /* padding: 10px 20px; */
            /* 上 左右 下 */
            /* padding: 10px 20px 30px; */
            /* 上 右 下 左 */
            /* padding: 10px 20px 30px 40px; */
        }

        .sprite {
            width: 180px;
            height: 180px;
            border: 1px solid;
            background-image: url('./sprite.jpg');
        }
        .sprite:hover{
            background-position: -277px 0;
        }
    </style>
</head>

<body>
    <div class="sprite"></div>

    <div class="box"></div>

    <p class="blue">ppppp</p>
    <span>span span span</span>
    <h1>h1h1</h1>
    <h2 class="blue">h2h2</h2>
    <h3>h3h3</h3>


    <div class="blue">
        <p>
            <span></span>
        </p>
    </div>

    <ol>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>

</body>

</html>